import { Radio, Stack, Text, View } from 'native-base';
import React, { useEffect } from 'react';
import { CommonStyle } from '../../../../common/commonStyle.ts';

interface IAdditionalFormProps {
  item: IGoodsAdditionalInfo;
  edit?: boolean;
  onChange: (value: string) => void;
}
export default function AdditionalFormRadioGroup({ item, edit, onChange }: IAdditionalFormProps) {
  return (
    <View flexDirection={'row'} alignItems={'center'} py={4}>
      <View width={'25%'} flexDirection={'row'}>
        {item.requiredFlag && !edit && (
          <Text marginRight={1} color={CommonStyle.price}>
            *
          </Text>
        )}
        <Text marginRight={2} fontSize={12}>
          {item.attrName}
        </Text>
      </View>
      <Radio.Group name="radio" onChange={onChange}>
        <Stack direction={'row'} flexWrap={'wrap'} space={3}>
          {item.fieldOptions &&
            JSON.parse(item.fieldOptions).map((_item: any, index: number) => {
              return (
                <Radio colorScheme="emerald" size="sm" value={_item} my={1} key={index}>
                  {_item}
                </Radio>
              );
            })}
        </Stack>
      </Radio.Group>
    </View>
  );
}
